<template>
  <div class="publicBox" id="shoperCss">
    <div class="boxItem" id="publicSearch">      

<el-form ref="form" :inline="true"  class="demo-form-inline">
    <el-row>
  <el-form-item label="门店名称">
            <el-input class="pubIpt" v-model="shoperName"  placeholder="请输入门店名称"></el-input>
  </el-form-item>
    <el-form-item label="门店编号" class="label_right">
            <el-input class="pubIptS"  v-model="shoperNo" placeholder="请输入门店编号"></el-input>
  </el-form-item>
  <el-form-item label="所在区域" class="label_right" >
  <el-select  filterable  v-model="areaId" placeholder="全部" class="pubSlt138">
    <el-option
      v-for="item in getselect"
      :key="item.id"
      :label="item.name"
      :value="item.id" 
      >
    </el-option>
  </el-select>
  </el-form-item>
 <el-form-item class="label_btn">
            <el-button class="pubBtnBlue" type="primary" @click="getshopApi">查询</el-button>
  </el-form-item>
    </el-row>
<el-row  class="two_form publicBox">
    <el-row class="two_form_item">
        <el-form-item>
            <el-button class="pubBtnGree pubBtnBlueL_a" type="primary" @click="Newshoper()">新建</el-button>
        </el-form-item>
    </el-row>
    <el-row  class="two_form_item_a">
        <el-form-item>
            <el-button class="pubBtnBlueL pubBtnBlueL_a" @click="exportFn" type="primary">导出</el-button>
        </el-form-item>
    </el-row>
    
</el-row>

</el-form>
</div>
          <public-table class="colum"  
          @handleEdit="handleEdit" 
          :columnDefs="columnDefs" 
          :tableData="tableData"
          :order=true></public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/shop.js"
import * as pubAPI from '@api/public.js'
import  baseConfig from '@api/common/baseconfig.js'
export default {
  components: {
         publicTable
  },
  data() {
    return {
        columnDefs :[
            {headerName: '门店编号', field: 'no',width:90},
            {headerName: '门店名称', field: 'name',width:90},
            {headerName: '门店经纬度', field: 'coordinate',width:170},
            {headerName: '所在区域', field: 'storeareaname',width:120},
            {headerName: '详细地址', field: "detailed",width:280},
            {headerName: '负责人', field: 'principal',width:70},
            {headerName: '联系电话', field: 'phone',width:109},
            {headerName: '状态', field: 'status',width:50},
            {headerName: '创建时间', field: 'createtime',width:120}
        ],
        tableData: [],
        // detailed:'',
        pageNum:1,
        pageSize:100,
        shoperName:null,
        shoperNo:null,
        areaId:null,
        getselect: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
    handleEdit(row){
      this.$router.push({path:"/platform/shop/shoperEdit",query:{data:row}})
    },
    Newshoper(){
      this.$router.push({path:"/platform/shop/shoperEdit"})
    },
    async getshopApi(){   //获取门店管理表值
      let params={page:this.pageNum,size:this.pageSize,name:this.shoperName,no:this.shoperNo,areaId:this.areaId}
      await API.getshopApi(params).then(res=>{
      if(res.IsPositive){
          this.tableData=res.Data
          // var length = res.Data.records.length
          // for(var i = 0 ;i<length ;i++){
          //   var detailed = res.Data.records[i].address+ "楼" + res.Data.records[i].building+ "栋" + res.Data.records[i].layer+"层"
          //    console.log(detailed)
          // }     
          // console.log(length)
          // console.log("res",res.Data)
        }else{
          this.$message.error({message:res.ErrorCode})
        }
      })
    },
    async exportFn(){
      await API.exportshoper(this.ruleForm,baseConfig.baseUrl).then(res=>{
              pubAPI.creatExcelFn("门店管理.xlsx",res)
        })
    }
  },
  async created() {
    this.getselect = await this.$getSelect()
    this.getshopApi()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
  #shoperCss{
    .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      }
      .itemp{
      font-size: 16px;
      } 
      .label_right{
            margin-left: 28px;
        }
        .label_btn{
            margin-left: 42px;
        }
    }
    .two_form{
        display: block;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .two_form_item{
            width: 1190px;
        }
        .two_form_item_a{
            width: 90px;
        }
    }
  }

</style>